{% extends 'base.html' %}
{% load static %}
{% block extra_css %}
<style>
    .carousel-item img {
        width: 100%;
        height: 400px;
        object-fit: cover;
    }
    .carousel-caption {
        bottom: 100px;
        background: rgba(0, 0, 0, 0.5);
        padding: 20px;
        border-radius: 10px;
    }
    .carousel-caption h5 {
        color: white;
        font-weight: 600;
    }
    .carousel-caption p {
        color: white;
        font-size: 1.1rem;
    }
    .card-img-top {
        height: 200px;
        object-fit: cover;
    }
    .card-img-top i {
        color: #6c757d;
    }
    .category-icon {
        font-size: 2.5rem;
        color: #0d6efd;
    }
    .card {
        transition: transform 0.3s ease;
    }
    .card:hover {
        transform: translateY(-5px);
    }
    .card-title {
        font-weight: 600;
        margin-bottom: 1rem;
        color: inherit;
    }
    .card:hover {
        transform: translateY(-5px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }
    .card:hover .card-title {
        color: #0d6efd;
    }
    .card-text {
        color: #6c757d;
        line-height: 1.5;
    }
    .btn-outline-primary {
        padding: 0.5rem 1.5rem;
        font-weight: 500;
    }
    .btn-outline-primary:hover {
        background-color: #0d6efd;
        border-color: #0d6efd;
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid mt-5">
    <div id="carouselExample" class="carousel slide" data-bs-ride="carousel">
        <div class="carousel-indicators">
            <button type="button" data-bs-target="#carouselExample" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
            <button type="button" data-bs-target="#carouselExample" data-bs-slide-to="1" aria-label="Slide 2"></button>
            <button type="button" data-bs-target="#carouselExample" data-bs-slide-to="2" aria-label="Slide 3"></button>
        </div>
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="{% static '1200X400.jpg' %}" class="d-block w-100" alt="科技">
                <!-- <div class="carousel-caption d-none d-md-block">
                    <h5>科技创新</h5>
                    <p>探索未来科技</p>
                </div> -->
            </div>
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Previous</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
        </button>
    </div>
</div>

<!-- 搜索栏 -->
<div class="container mt-5 mb-5">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-body">
                    <form action="{% url 'search' %}" method="GET" class="d-flex">
                        <div class="input-group">
                            <input type="text" name="query" class="form-control" placeholder="请输入搜索内容..." required>
                            <button class="btn btn-primary" type="submit">
                                <i class="bi bi-search"></i> 搜索
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="col-md-2 d-flex align-items-center justify-content-center">
            <div class="card border-0 bg-light">
                <div class="card-body text-center">
                    <a href="{% url 'add_product' %}" class="btn btn-primary rounded-pill px-3 py-2">
                        <i class="bi bi-plus-circle me-1"></i>
                        添加信息
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="container mt-5">
    <div class="row">
        <div class="col-12">
            <h2>信息列表</h2>
            {% if products %}
            <div class="row row-cols-1 row-cols-md-3 g-4">
                {% for product in products %}
                <div class="col">
                    <a href="{% url 'product_detail' product.id %}" class="text-decoration-none">
                        <div class="card h-100">
                            {% if product.image %}
                                <img src="{{ product.image.url }}" class="card-img-top" alt="{{ product.title }}">
                            {% else %}
                                <div class="card-img-top bg-light text-center py-5">
                                    <i class="fas fa-info-circle fa-3x text-muted"></i>
                                </div>
                            {% endif %}
                            <div class="card-body">
                                <h5 class="card-title">{{ product.title }}</h5>
                                <div class="mt-3">
                                    <small class="text-muted">
                                        <i class="fas fa-user me-1"></i>联系人：{{ product.publisher.nickname }}<br>
                                        <i class="fas fa-user me-1"></i>联系电话：{{ product.publisher.phone }}<br>
                                        <i class="fas fa-clock me-1"></i>发布时间：{{ product.created_at|date:"Y-m-d H:i" }}
                                    </small>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
                {% endfor %}
            </div>
            {% else %}
            <div class="alert alert-info">
                暂无信息
            </div>
            {% endif %}
        </div>
</div>

<!-- Categories Section -->
<div class="container mt-5">
    <h2 class="text-center mb-4">热门分类</h2>
    <div class="row">
        {% for category in categories %}
        <div class="col-md-6 mb-4">
            <div class="card h-100 border-0 shadow-sm">
                <div class="card-body text-center">
                    <div class="category-icon mb-3">
                        <i class="fas fa-3x fa-tags text-primary"></i>
                    </div>
                    <h3 class="card-title">{{ category.name }}</h3>
                    <p class="card-text text-muted">{{ category.description }}</p>
                    <a href="{% url 'product_list' %}?category={{ category.id }}" class="btn btn-outline-primary mt-3">查看信息</a>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
</div>
{% endblock %}
